<script setup  lang="ts" >
import EchartTempVue from '@/components/echartTemp.vue';
import Vtext from './components/text.vue';
import {  reactive,ref } from 'vue';
// 文字
let num = 0;
let arrs = [ 
    '中午你无故扇了我一巴掌，我握着你的手说“手怎么这么凉，都怪我没有照顾好你，一定要更加对你好”',
    '在我一如既往的每天跟她问早安的时候，她今天终于回我了。我激动地问她我是不是今天第一个跟她说话的人，她说不是，是**她男朋友把她叫起来退房**的',
    '我存了半年的工资，给你买了一只lv，你对我说了一句你真好，我好开心。这是你第一次这么认可我，以前你都只对我说滚。今天晚上逛闲鱼，看到你把我送你的lv发布上去了。我想，你一定是在考验我，于是我用借呗里的钱把它买了下来，再次送给你，给你一个惊喜，我爱你 ',
    '12点队长过来准时交班，出去的车辆按喇叭我也没听到，只因我在监控中看到了穿睡衣出来倒垃圾的你，望你望的入神不由的傻笑了起来，队长过来骂我扣了我一天工资。我委屈，想抱你。你送的泡面真好吃',
    '你跟他已经醒了吧?我今天捡垃圾挣了一百多明天给你打过去你快点休息吧我明天叫你起床给你点外卖买烟给你点你最喜欢的奶茶晚上我会继续去摆地摊的你不用担心我烦你床只有那么大睡不下三个你要好好照顾好自己不要让他抢你被子我永远爱你'
]
let str = ref(arrs[num]);
let str_counts = ref(0);

// 音符数量
const count = 100;
let rotate = ref(0);
let timer = 0;
const reas = reactive({
   title:[ ],
   value:[ ]
}) 

// audio API
function intis(audio){
    if( rotate.value>0) return false;
    var context =new AudioContext();  
    var source = context.createMediaElementSource(audio);
    let analyser = context.createAnalyser();
    analyser.fftSize = 512;
    source.connect(analyser);
    analyser.connect(context.destination);

    var bufferLength = analyser.frequencyBinCount;
    console.log(bufferLength);
    
    var dataArray = new Uint8Array(count);
    analyser.getByteFrequencyData(dataArray); 
    
  const darws = ()=>{ 
    
    // 音符动画
    let now = Date.now();
      if(now-timer>16){
        analyser.getByteFrequencyData(dataArray); 
        rotate.value+=1;
        let title = [];
        let value=  [];
        dataArray.forEach((item,index) => {
              title.push(`${index}`);
              value.push(item);
        });
        reas.title = title;
        reas.value = value;
        timer = now; 
        // console.log(str_counts.value>(str.value.length+20))
        if(str_counts.value>(str.value.length+40)){ 
            // 延迟控制
            let limits = str.value.length*1.3;
            if(limits<10){
              limits = 10;
            }
            str_counts.value = (0-(limits)); 
            num=num>(arrs.length-2)?(arrs.length-1):num+1; 
          }else{
            str_counts.value +=1;
            if(str_counts.value>0 && str_counts.value<str.value.length){
                str.value = arrs[num];
            } 
          } 
      } 
      requestIdleCallback(()=>darws()); 
      
  }

  timer = Date.now();
  darws(); 
}
 

const domsclick = ()=>{
  var audio = document.getElementById("audio"); 
  audio?.play();
  intis(audio);
}
 
</script>

<template>
  <div class="container">
   
    <div @click="domsclick" class="logo"
    :style="{transform:`rotate(${rotate}deg)`}"
    >
        <img class="img" src="https://static.fequan.com/vueconf/img/vue-badge.png" alt="">
    </div>
    <div class="dtexts">
      <Vtext :str="str" :count="str_counts"></Vtext>
    </div>
    <audio id="audio"   src="../assets/asd.mp3" crossOrigin="anonymous"></audio>
    <EchartTempVue :count="count" type="bar" :datas="reas"></EchartTempVue>
 </div>
</template> 
<style  scoped>
.dtexts{
   position: absolute;
   left: 0;
   width: 100%;
   top: 100px;
   height: 200px;
   z-index: 99999;
}
 .container{
   width: 100vw;
   height: 100vh; 
   overflow: hidden;
   position: relative;
 }
.logo{
   width: 150px;
   height: 150px;
   position: absolute;
   left: 50%;
   top: 40%;
   margin-left: -75px;
   margin-top: -100px;
   
   z-index: 99999999;
   border-radius: 50%;
   /* animation: rotates 3.2s infinite linear; */
}
@keyframes rotates {
    from{
       transform: rotate(0deg);
    }to{
      transform: rotate(360deg);
    }
}
.img{
  width: 100%;
   height: 100%;
}
</style>
